
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/include.js"></script>
    <script src="../js/getParameter.js"></script>
    <script type="text/javascript" src="../js/perfect-scrollbar.min.js"></script>
    <script type="text/javascript" src="../js/main.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="../myjs/musicList.js"></script>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/materialdesignicons.min.css" rel="stylesheet">
    <link href="../css/style.min.css" rel="stylesheet">

    <script>
        $(function (){
            var name1=getParameter("name");
            console.log(name1)
            var currentPage=getParameter("currentPage");
            load(name1,currentPage);
        })
        function load(name,currentPage) {
            $.post("/music/music/findMusicsByName",{name:name,currentPage:currentPage},function (data)   {
                console.log(data)
                if (data.list!=null){
                    //获取tbody
                    //拼接
                    var trlist = '';
                    for (var i = 0; i < data.list.length; i++) {
                        var tr ="<tr>" +
                            //编号
                            "       <td>"+(((data.currentPage-1)*5)+i+1)+"</td>" +
                            //歌名
                            "       <td id='music_"+i+"' ><span onclick='playMusic("+data.list[i].mid+")' >"+data.list[i].musicname+"</span></td>" +
                            //歌手
                            "       <td>"+data.map[i].singername+"</td>" +
                            "</tr>"
                        trlist += tr;
                    }
                    //2.3 将liList添加到ul中
                    $("#tbody").html(trlist);
                    //4.处理页面 前5后4
                    //4.1 开始页数 = 当前页数-5
                    var start = data.currentPage-5;
                    //4.2结束页数=当前页数+4
                    var end = data.currentPage+4;
                    //4.3判断前面不足5个的情况
                    if (start<1){
                        start=1;
                        end=10;
                    }
                    //4.4判断后面不足4的情况
                    if (end>data.totalPage){
                        end = data.totalPage;
                        start = end-9;
                    }
                    //4.5总页数不足10页
                    if (data.totalPage<10){
                        start = 1;
                        end = data.totalPage;
                    }
                    //4.6拼接 ul -li
                    $pageUl = $("#pageUl");
                    //首页  cid = 3
                    var pageList = '<li><a href="findAll.html?name='+name+'&currentPage='+1+'">首页</a></li>';

                    //上一页
                    var prePage = data.currentPage - 1;
                    if(prePage < 1){
                        prePage = 1;
                    }

                    pageList +=
                        '<li ><a href="findAll.html?name='+name+'&currentPage='+prePage+'">上一页</a></li>';

                    //拼接 页码 从start开始 end 结束
                    for(var i = start ; i <= end; i++){

                        if(i === data.currentPage){

                            pageList += '<li  class="active" ><a href="findAll.html?name='+name+'&currentPage='+i+'">'+i+'</a></li>';

                        }else {

                            pageList += '<li  ><a href="findAll.html?name='+name+'&currentPage='+i+'">'+i+'</a></li>';

                        }
                    }
                    //下一页
                    var nextPage = data.currentPage + 1;
                    if (nextPage > data.totalPage){
                        nextPage = data.totalPage;
                    }
                    pageList += '<li ><a href="findAll.html?name='+name+'&currentPage='+nextPage+'">下一页</a></li>';

                    //末页
                    pageList += '<li ><a href="findAll.html?name='+name+'&currentPage='+data.totalPage+'">末页</a></li>';

                    //4.7 将pageList添加到ul中
                    $("#pageUl").html(pageList);
                }
            },"json");
        }
        function playMusic(mid){
            $.post(
                "/music/music/findMusicsByMid",{mid:mid},function (data){
                    clickmusicplay_pause();
                    console.log("../"+data.musicpath)
                    $("#musicaudio").attr("src","../"+data.musicpath);
                    $("#musicnameaudio").html(data.musicname);
                }
            )
        }
        function clickmusicplay_pause(){
            $('#audioPlay').attr('src', '../images/pause2.png');
            // 开始播放当前点击的音频
            audio.load();
            audio.play();

            audio.oncanplay=function (){
                $('#totalTime').html(transTime(audio.duration))
            }


        }
    </script>
</head>
<body>
<div id="header">

</div>
<div id="audio">

</div>
<table class="table table-bordered">
    <thead>
    <tr>
        <th>编号</th>
        <th>歌名</th>
        <th>歌手</th>
    </tr>
    </thead>
    <tbody id="tbody"></tbody>
</table>
<ul class="pagination" id="pageUl">
</ul>
<div id="footer"></div>
</body>


</html>